<template>
    <div class="center-tool">
        <template v-for='(pic, ind) in toolList'>
            <div class="tool" :key='ind'>
                <base-image 
                    :active='pic.active' 
                    :point='ind + 1'                     
                    :url='pic.url'
                    @click.native='onPicClick(ind, "bg")'
                ></base-image>
                <div class="tool-select">
                    <template v-for='(pic, ind) in toolList'>
                        <base-tool :key="ind">
                        </base-tool>
                    </template>
                </div>
            </div>
        </template>            
        
    </div>
</template>
<script>
import baseImage from '@/components/base/baseImage.vue'
import baseAdd from '@/components/base/baseAdd.vue'
import baseCanvas from '@/components/base/baseCanvas.vue'
export default {
    components: {
        baseImage,
        baseAdd,
        baseCanvas
    },

    data: () => ({
        toolList: [],
        bgSelect: [],
        bodySelect: [],
        bgList: [],
        bodyList: [
            // {url: require(`@/assets/image/${`logo.png`}`), active: true},
            // {url: require(`@/assets/image/${`logo.png`}`), active: false}
        ]
    }),
    created() {
        
    },

    methods: {
        // onPicClick(ind, name) {
        //     let list = `${name}List`
        //     this[list].forEach(item => item.active = false)
        //     this[list][ind].active = true
        //     console.log(this[list], ind);
        // },
        // onAddPic(name) {
        //     this.showPicSelect = true
        //     this.selectList = this[`${name}Select`]
        // }
    }
    
}
</script>
<style lang="scss" scoped>
.center-tool{
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #ccc;
    align-items: center;
}
</style>